<template>
    <view class="wrap">
        <view class="key-input">
            <view class="title">输入验证码</view>
            <view class="tips">验证码已发送至 +{{ phone }}</view>
            <u-code-input v-model="code" :disabledKeyboard="false" @change="change" @finish="finish" :focus="true"
                maxlength="4"></u-code-input>
            <text :class="{ error: error }">验证码错误，请重新输入</text>
            <view class="captcha">
                <text :class="{ noCaptcha: show1 }" @tap="noCaptcha">点击重新获取验证码</text>

                <text :class="{ regain: !show1 }">请在{{ countDown }}秒内数去验证码</text>
            </view>
        </view>

        <!-- <view class="btn">
              <u-button type="primary" @click="goto">验证</u-button>
          </view> -->

        <u-toast ref="notice"></u-toast>
        <u-keyboard ref="uKeyboard" mode="number" @confirm="confirm" @cancel="cancel" @change="valChange"
            @backspace="backspace" :dotDisabled="true" :show="show"></u-keyboard>
    </view>
</template>
  
<script>
export default {
    onLoad(option) {


        this.phone = option.phone ? option.phone : "";
        this.id = option.id ? option.id : "";
        if (this.phone.trim().length === 0) {
            this.$refs.notice.show({
                type: "warning",
                message: "手机号为空，请重新输入手机号",
                complete: () => {
                    //返回上一个界面
                    uni.$u.route({
                        type: "navigateBack",
                        delta: 1,
                    });

                },
            });
        } else {
            // 发送验证码
            this.getcode();
        }
    },
    onReady() {
        // 如果想一进入页面就打开键盘，请在此生命周期调用
        // this.show = true;
    },


    data() {
        return {
            maxlength: 4,
            code: "",
            show1: false,
            id: "",
            show: false,
            phone: "",
            countDown: 60,
        };
    },
    mounted() {
        this.startCountDown();
    },

    methods: {
        // 按键被点击(点击退格键不会触发此事件)
        valChange(val) {
            // 将每次按键的值拼接到code变量中，注意+=写法
            this.code += val;
        },
        // 退格键被点击
        backspace() {
            // 删除code的最后一个字符
            if (this.code.length)
                this.code = this.code.substr(0, this.code.length - 1);
        },

        // 倒计时60s
        startCountDown() {
            let timer = setInterval(() => {
                if (this.countDown > 0) {
                    this.countDown--;
                } else {
                    clearInterval(timer);

                    this.show1 = true;
                }
            }, 1000);
        },

        change(e) {
            // console.log('内容改变，当前值为：' + e);
        },
        finish(e) {
            // 调用检验输入验证码是否正确
            this.code = e;
            this.checkMobileCode();
        },

        // 键盘确认
        confirm() {
            this.checkMobileCode();
        },

        // 键盘取消
        cancel() {
            this.show = false;
        },

        goto(e) {

            uni.$u.route({
                type: "redirectTo",
                url: "pagesB/merchant/index",
                params: {
                    phone: this.phone,
                    id: e,
                    flag: "phone"
                }

            })
        },


        // 重新获取验证码
        noCaptcha() {
            this.getcode();
            this.startCountDown();

            this.show1 = false;
            this.countDown = 60;
        },

        async getcode() {

            let data = {
                phone: this.phone,
            }

            await this.$u.api.admin.getmobilecode(data);

        },
        async checkMobileCode() {
            let data = {
                code: this.code,
                phone: this.phone,
            };


            let result = await this.$u.api.admin.checkcode(data);
            {
                if (result.code) {
                    this.$refs.notice.show({
                        type: "success",
                        message: result.msg,
                        duration: 900,
                        complete: () => {
                            this.show = false;
                            this.goto(result.data);
                        },
                    });
                } else {

                    if (result.data.errorMsg == "codeError") {
                        this.$refs.notice.show({
                            type: "warning",
                            message: result.msg,
                            duration: 1800,
                            complete: () => {
                                this.code = ""
                            },
                        });


                    } else {

                        this.$refs.notice.show({
                            type: "error",
                            message: result.msg,
                            duration: 2200,
                            complete:()=>{
                                this.code = ""
                            }

                        })

                    }
                }
                }
            }

        }


    };
</script>
  
<style lang="scss" scoped>
.btn {
    width: 70%;
    margin: 120px auto;
}

.wrap {
    padding: 80rpx;
}

.box {
    margin: 30rpx 0;
    font-size: 30rpx;
    color: 555;
}

.key-input {
    padding: 30rpx 0;

    text {
        display: none;
    }

    .error {
        display: block;
        color: red;
        font-size: 30rpx;
        margin: 20rpx 0;
    }
}

.title {
    font-size: 50rpx;
    color: #333;
}

.key-input .tips {
    font-size: 30rpx;
    color: #333;
    margin-top: 20rpx;
    margin-bottom: 60rpx;
}

.captcha {
    font-size: 30rpx;
    margin-top: 40rpx;

    .noCaptcha {
        display: block;
        color: blue;
    }

    .regain {
        display: block;
    }
}
</style>
  